import React, { useEffect, useState } from 'react'
import './shou.css'
import Buttonss from '../Butto/Butto'
import { Swiper } from 'react-vant';
import { items } from './demo/items';
import './demo/base.less'
import { BrowserRouter as Router, Route, Routes, useNavigate } from 'react-router-dom'
import axios from 'axios'
import {  Loading } from 'react-vant';
export default function Shop_page() {
	const navigate = useNavigate()
	const [zixunList,setZixunList]=useState([])
	const [page,setPagesize]=useState(1)
	const [pageSize,setPageSize]=useState(5)
	const [is_loading,setIs_loading]=useState(true)
	const getZxl=()=>{
		axios.get(`http://localhost:3000/notification?page=${page}&pagesize=${pageSize}`).then(res=>{
			let {code,data}=res.data
			if(code==200){
				let str=''
				data.forEach(element => {
					str=element.content
					element.content=str.slice(0,30)+'.....'
				});
				setZixunList(data)
			} 
		})
	}
	const load=()=>{
		setIs_loading(false)
		let num=3
		const interval=setInterval(()=>{
			num--;
			if(num<=0){
				clearInterval(interval)
				setPageSize(pageSize=>pageSize+3)
				setIs_loading(true)
				getZxl()
			}
		},1000)
	}
	useEffect(()=>{
		getZxl()
	},[])
	return (
		<div>
			<nav>
				<div className='shou_top'>
					<div className="demo-swiper">
						<Swiper autoplay={5000}>{items}</Swiper>
					</div>
				</div>
<<<<<<< HEAD
				{/* <p style={{ fontSize: '20px', textAlign: 'center' }}>生活</p> */}
				{/* <nav className='shou_main'>
=======
				<h2>&nbsp;&nbsp; <span style={{color:'blue'}}>|</span> 生活</h2>
				<nav className='shou_main'>
>>>>>>> 68cd53bc9756b103f9f9d7c1233b7d2794e053c6
					<div className='shou_gongList'>
						<div className='container'>
							<svg t="1729759360309" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4290" width="55" height="55"><path d="M892.4672 576.3072c0 209.5616-169.8816 379.392-379.392 379.392s-379.392-169.8816-379.392-379.392c0-191.3344 200.4992-390.2976 341.0944-500.6336 22.9376-18.0224 54.9376-19.3536 79.0528-2.8672 161.8432 110.6432 338.6368 310.3232 338.6368 503.5008z" fill="#FF5D50" p-id="4291"></path><path d="M678.8608 441.9584h-165.7344V295.3728c0-21.4016-28.416-28.928-39.0144-10.2912l-144.9984 293.8368c-7.8848 13.9264 2.1504 31.1808 18.1248 31.1808h165.7344v152.5248c0 21.4016 28.416 28.928 39.0144 10.2912l144.9984-299.776c7.936-13.9264-2.0992-31.1808-18.1248-31.1808z" fill="#FFDF99" p-id="4292"></path></svg>
							<p><span>生活缴费</span></p>
						</div>
						<div className='container'>
							<svg t="1729759970879" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9571" width="55" height="55"><path d="M230.912 211.84l-21.6576-17.3312c10.112-12.9792 20.224-24.5248 31.744-36.096l20.224 20.224c-10.112 10.112-20.224 21.6576-30.3104 33.2032z m-37.5296 59.136l-25.984-12.9792c7.2192-12.9792 14.4384-25.9584 21.6576-37.504l24.5248 15.872c-7.2192 10.112-12.9792 21.632-20.224 34.6368z m-23.0912 57.7536l-27.4176-8.6528c4.3264-13.0048 8.6528-25.984 14.4384-37.5296l25.9584 11.52a169.2672 169.2672 0 0 0-12.9792 34.6624zM178.944 643.328A390.144 390.144 0 0 1 135.68 346.0352l27.4176 7.2192c-23.0912 93.7984-7.2192 193.3824 40.3968 275.6352l-24.5248 14.4384z m43.2896-278.528l-27.392-7.2192a164.8128 164.8128 0 0 1 12.9792-37.5296l27.392 11.5456c-5.76 10.112-8.6528 21.6576-12.9792 33.2032z" fill="#303951" fillOpacity=".2" p-id="9572"></path><path d="M213.5808 584.1664c-28.8512-62.0544-37.5296-134.2208-24.5248-202.0352l28.8512 5.76c-11.52 62.0544-4.3264 126.976 21.6576 184.7296l-25.984 11.52z m668.16-5.7856l-27.392-10.112c5.76-14.4128 10.0864-28.8512 14.4128-43.264l27.4176 7.1936a211.1488 211.1488 0 0 1-14.4384 46.1824z m23.0912-76.4928l-28.8512-5.76c2.8928-12.9792 4.3264-27.4176 5.76-40.3968l28.8768 1.4336c-1.4336 15.872-2.8928 30.3104-5.7856 44.7232z m5.7856-72.1408h-28.8768c0-13.0048 0-24.5248-1.4336-37.5296l28.8512-2.8928c1.4592 14.4384 1.4592 27.4176 1.4592 40.4224z m-33.2032-60.6208c-15.872-95.232-69.2736-181.8368-145.7408-238.1056l17.3056-23.0912a400.128 400.128 0 0 1 157.312 256.8704l-28.8768 4.352z m-56.2688 47.616c0-11.52-1.4592-24.5248-2.8928-36.0704l28.8512-4.3264c1.4592 12.9792 2.8928 25.984 2.8928 40.3968h-28.8512z" fill="#303951" fillOpacity=".2" p-id="9573"></path><path d="M813.9264 354.688c-13.0048-62.0544-46.1824-118.3232-93.7984-161.6128l18.7648-21.6576c50.5088 46.1824 86.5792 109.6704 102.4512 176.0768l-27.4176 7.1936z" fill="#303951" fillOpacity=".2" p-id="9574"></path><path d="M419.9424 820.8384l115.456 83.712 408.3968-176.0768-116.8896-83.712-406.9632 176.0768z m202.0352-199.168l-132.7616-75.0336-408.3968 174.6176 134.1952 77.9264" fill="#303951" fillOpacity=".1" p-id="9575"></path><path d="M512.3072 190.1824c-141.4144 0-256.8704 115.456-256.8704 256.8704 0 66.3808 24.5248 125.568 64.9472 171.7504l168.832-72.192 131.328 76.5184 70.7072 7.1936a252.8256 252.8256 0 0 0 76.4928-181.8112c1.4336-142.8736-113.9968-258.3296-255.4368-258.3296z" fill="#303951" fillOpacity=".1" p-id="9576"></path><path d="M532.5056 920.3968l-118.3232-86.5792-204.928-21.6576-160.1792-92.3392 441.6-189.056 135.6288 77.9264 206.3872 21.632 141.4144 102.4768-441.6 187.5968zM219.392 784.7424l206.336 23.0912 111.1296 80.8192L914.944 727.04l-93.7984-67.8144-203.4944-21.6576-128.4352-73.6-375.2192 161.6384 105.3696 59.1616z" fill="#303951" p-id="9577"></path><path d="M519.5264 727.04c4.352-135.68 134.2208-168.8576 134.2208-279.9872a142.1056 142.1056 0 0 0-161.6384-141.4144c-75.0336 8.6528-129.8944 76.4928-124.1088 151.5264 7.2192 102.4512 129.8688 138.5472 134.1952 269.8496" fill="#77AAFF" p-id="9578"></path><path d="M533.9648 727.04l-21.6576-1.4592-21.6576 1.4336c-2.8672-64.9216-36.0704-106.7776-69.248-145.7408-30.3104-36.096-60.6208-72.1664-64.9472-124.1088-5.7856-82.2528 54.8352-157.312 137.088-167.424a160.384 160.384 0 0 1 124.1088 37.5296c33.2032 30.3104 53.4016 72.1664 53.4016 118.3488 0 59.1616-33.2032 98.1248-64.9472 135.6544-34.6368 38.9632-69.2736 79.36-72.1408 145.7408z m-21.6576-409.856c-5.76 0-11.52 0-17.3056 1.4336-66.3808 8.6528-115.456 69.2736-111.1296 135.68 2.8928 43.264 28.8512 73.5744 57.728 108.2112 27.392 31.744 56.2688 67.84 69.2736 116.8896 12.9792-50.5088 43.264-85.1456 69.2736-116.8896 31.744-37.5296 57.728-69.2736 57.728-116.8896 0-36.096-15.872-72.1664-43.3152-96.6912-21.632-20.224-50.5088-31.744-82.2528-31.744z" fill="#303951" p-id="9579"></path><path d="M555.5968 447.0528c0 24.5504-18.7648 43.2896-43.264 43.2896a42.5216 42.5216 0 0 1-43.3152-43.264c0-24.576 18.7648-43.3152 43.2896-43.3152 24.5248 0 43.2896 20.224 43.2896 43.2896z" fill="#FFFFFF" p-id="9580"></path><path d="M512.3072 504.7808a57.9072 57.9072 0 0 1-57.728-57.728 57.9072 57.9072 0 0 1 57.728-57.728 57.9072 57.9072 0 0 1 57.728 57.728 57.9072 57.9072 0 0 1-57.728 57.728z m0-86.5792a28.928 28.928 0 0 0-28.8512 28.8512c0 15.872 12.9792 28.8768 28.8512 28.8768a28.928 28.928 0 0 0 28.8768-28.8768 28.928 28.928 0 0 0-28.8768-28.8512zM209.0752 785.92l243.0976-106.8288 11.5968 26.4192-243.0976 106.8288-11.5968-26.4192z m333.568-33.1008l274.816-124.288 11.904 26.2912-274.816 124.288-11.8784-26.2912z" fill="#303951" p-id="9581"></path></svg>
							<p><span>向导地图</span></p>
						</div>
						<div className='container'>
							<svg t="1729760048344" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10617" width="55" height="55"><path d="M332.00000027 352.16666666c2.81249973 1.0546875 5.62500027 0 7.73437446-1.40625027 3.1640625-2.81249973 3.51562527-7.73437527 0.70312554-10.89843696a9.66796848 9.66796848 0 0 0-5.2734375-2.81250054c-2.109375 0-4.21875 0.70312473-5.62500027 1.75781304-2.109375 1.75781223-2.81249973 4.57031277-2.46093777 7.3828125 0.70312473 2.81249973 2.46093777 4.92187473 4.92187554 5.97656223zM306.68750027 337.40104166c-2.109375 0-4.21875 0.70312473-5.62500027 1.75781223-1.40625027 1.40625027-2.46093777 3.1640625-2.81249973 5.2734375 0 2.109375 0.70312473 4.21875 1.75781223 5.62500027 1.40625027 1.40625027 3.1640625 2.46093777 5.2734375 2.81249973s4.21875-0.70312473 5.62500027-1.75781223c3.1640625-2.81249973 3.51562527-7.73437527 0.70312473-10.89843777a9.66796848 9.66796848 0 0 0-5.2734375-2.81249973zM889.578125 636.58072889c-128.671875 71.71875-222.18749973 161.71875027-264.02343777 207.07031277l-77.69531223-55.19531277h-49.5703125l-21.09375 15.46875054 177.53906277 163.82812446c30.5859375-71.01562527 127.26562473-209.53124973 245.7421875-308.32031196l-10.89843777-22.85156304z" fill="#1890ff" p-id="10618"></path><path d="M527.8203125 774.39322943l19.68749973 14.06249946h31.640625l3.1640625-2.46093696 3.1640625 2.46093696h72.07031277c25.3125 0 46.40625-17.22656277 46.40625-37.96875V208.72916666c0-21.09375-20.74218723-37.96875-46.40625-37.96875H274.34374973c-25.3125 0-46.40625 17.22656277-46.40625 37.96875v541.40625027c0 21.09375 20.74218723 37.96875 46.40625 37.96875h223.59375l19.33593777-14.06250027h10.546875z m100.89843723-551.95312527h10.89843777s1.0546875 0 1.75781223 0.35156277c1.75781223-4.21875 5.62500027-7.3828125 10.546875-7.3828125 6.328125 0 11.24999973 5.62500027 11.25000054 12.30468723s-5.2734375 12.30468723-11.25000054 12.30468723c-5.2734375 0-9.4921875-3.86718723-10.89843696-9.14062473H629.0703125s-2.109375-0.35156277-2.81249973-1.40625027c-0.70312473-0.70312473-1.0546875-2.109375-1.0546875-3.1640625 0-2.46093777 1.75781223-4.57031277 4.21875-4.57031196z m-349.45312446-7.03124973c5.2734375 0 9.4921875 3.86718723 10.89843696 9.14062473H302.1171875c2.109375 0 4.21875 2.109375 4.21875 4.57031277s-1.75781223 4.57031277-4.21875 4.57031196h-10.89843777s-1.0546875 0-1.75781223-0.35156196c-1.75781223 4.57031277-5.97656223 7.3828125-10.546875 7.3828125-6.328125 0-11.24999973-5.62500027-11.24999973-12.30468804s5.2734375-12.30468723 11.24999973-12.30468723z m-23.203125 34.10156196h420.8203125v5.2734375H256.41406223v-5.2734375z m359.99999946 283.7109375h-14.41406223c-5.62500027 0-10.19531223-4.92187473-10.19531223-10.89843696s4.92187473-10.89843777 10.19531223-10.89843777h14.41406223c5.62500027 0 10.546875 4.92187473 10.546875 10.89843777s-4.92187473 10.89843777-10.546875 10.89843696z m10.546875 23.90625054c0 5.97656223-4.92187473 10.89843777-10.546875 10.89843696h-14.41406223c-5.62500027 0-10.19531223-4.92187473-10.19531223-10.89843696s4.92187473-10.89843777 10.19531223-10.89843777h14.41406223c5.62500027 0 10.546875 4.92187473 10.546875 10.89843777z m-10.546875-58.71093804h-14.41406223c-5.62500027 0-10.19531223-4.92187473-10.19531223-10.89843696s4.92187473-10.89843777 10.19531223-10.89843777h14.41406223c5.62500027 0 10.546875 4.92187473 10.546875 10.89843777s-4.92187473 10.89843777-10.546875 10.89843696z m-16.17187446-69.609375v-13.00781196h18.63281223v13.00781196h-18.63281223z m-197.92968804-30.5859375c-5.2734375 0-9.84375027-5.62500027-9.84374946-12.65625V289.58854139c0-7.03124973 4.57031277-12.65625 9.84374946-12.65625h243.28125054c5.2734375 0 9.84375027 5.62500027 9.84374946 12.65625v95.9765625c0 7.03124973-4.57031277 12.65625-9.84374946 12.65625H401.96093723z m162.07031304 135.35156277h-14.41406304c-5.62500027 0-10.546875-4.92187473-10.546875-10.89843777s4.92187473-10.89843777 10.546875-10.89843696h14.41406304c5.62500027 0 10.546875 4.92187473 10.546875 10.89843696s-4.92187473 10.89843777-10.546875 10.89843777z m10.546875 23.90624973c0 5.97656223-4.92187473 10.89843777-10.546875 10.89843777h-14.41406304c-5.62500027 0-10.546875-4.92187473-10.546875-10.89843777s4.92187473-10.89843777 10.546875-10.89843696h14.41406304c5.62500027 0 10.546875 4.92187473 10.546875 10.89843696z m-10.546875-58.71093723h-14.41406304c-5.62500027 0-10.546875-4.92187473-10.546875-10.89843777s4.92187473-10.89843777 10.546875-10.89843696h14.41406304c5.62500027 0 10.546875 4.92187473 10.546875 10.89843696s-4.92187473 10.89843777-10.546875 10.89843777z m-3.86718804-69.609375v-13.00781277h18.63281304v13.00781277h-18.63281304z m-46.75781196 104.4140625h-14.41406304c-5.62500027 0-10.19531223-4.92187473-10.19531223-10.89843777s4.92187473-10.89843777 10.19531223-10.89843696h14.41406304c5.62500027 0 10.546875 4.92187473 10.546875 10.89843696s-4.92187473 10.89843777-10.546875 10.89843777z m10.546875 23.90624973c0 5.97656223-4.92187473 10.89843777-10.546875 10.89843777h-14.41406304c-5.62500027 0-10.19531223-4.92187473-10.19531223-10.89843777s4.92187473-10.89843777 10.19531223-10.89843696h14.41406304c5.62500027 0 10.546875 4.92187473 10.546875 10.89843696z m-46.75781277-128.32031223v-13.00781277h18.63281223v13.00781277h-18.63281223z m36.56249973 69.609375h-14.41406223c-5.62500027 0-10.19531223-4.92187473-10.19531223-10.89843777s4.92187473-10.89843777 10.19531223-10.89843696h14.41406223c5.62500027 0 10.546875 4.92187473 10.546875 10.89843696s-4.92187473 10.89843777-10.546875 10.89843777z m7.03125054-69.609375v-13.00781277h18.63281223v13.00781277h-18.63281223z m-66.4453125-13.00781277v13.00781277h-18.63281304v-13.00781277h18.63281304zM357.31250027 343.72916666a36.56249973 36.56249973 0 1 1-73.05468804 0.07031223A36.56249973 36.56249973 0 0 1 357.31250027 343.72916666z m-100.89843804 271.40625027v-5.2734375H677.23437473v5.2734375H256.41406223z m21.79687554 14.06249946h375.11718723v47.81250027H278.21093777v-47.81250027z" fill="#1890ff" p-id="10619"></path></svg>
							<p><span>用户反馈</span></p>
						</div>
						<div className='container' onClick={()=>{navigate('/secondHand')}}>
							<svg t="1729760167454" className="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11616" width="55" height="55"><path d="M679.586859 667.198278m-331.559957 0a331.559957 331.559957 0 1 0 663.119914 0 331.559957 331.559957 0 1 0-663.119914 0Z" fill="#9DCAD9" p-id="11617"></path><path d="M515.350045 199.729602c122.571367 0 245.142734 0.55113 367.824327 0 51.475565 0 99.203445 11.794187 117.170291 63.269752 19.510011 55.113025 19.179333 112.540797-18.187298 165.339074a287.689989 287.689989 0 0 1-30.97352 30.863294s0.881808 33.949623 0 49.601723c-3.747686 105.376103-5.070398 211.193111-1.322713 316.67944a190.470614 190.470614 0 0 1-186.392249 195.87169c-163.465231 2.976103-327.040689 3.968138-490.395695 0C165.161886 1018.268245 94.396762 940.889559 92.412693 831.655544c-1.873843-105.486329-1.322713-211.193111 0-316.679441v-64.261787a198.406889 198.406889 0 0 1-35.382562-14.660064c-44.09042-33.067815-56.986868-103.50226-36.043918-163.685684 17.085038-49.271044 55.113025-72.198062 121.248655-72.52874 124.44521-0.330678 248.780194-0.110226 373.115177-0.110226z m29.761034 509.685253c0 66.13563 0.881808 132.932616 0 199.398923 0 34.61098 13.1169 49.822174 48.389235 48.83014 52.798278-1.432939 105.706781 0 158.50506-0.661356 83.771798-1.763617 132.271259-50.263079 133.704198-134.916685 1.432939-102.179548 0-204.579548 0.992034-306.759096v-56.105059s-33.067815 0-53.01873 0.771583c-78.370721 1.763617-156.851668 1.873843-235.222389 0-20.171367 0-54.231216-0.661356-54.231217-0.661357s0 36.484822 0.771583 55.884607c1.10226 64.592465 0.110226 129.405382 0.110226 194.2183z m-61.726588-3.417008c0-66.13563-0.661356-132.932616 0-199.398923v-47.286976H438.522489c-83.441119 0.771582-166.882239-1.432939-250.102907 2.645426-6.723789 0.330678-34.280301 0.992034-34.280301 0.992034v42.216577c-2.645425 110.22605-2.976103 221.55436 0 332.221313 1.984069 69.993541 50.814209 116.398708 121.248654 120.146394 50.924435 2.755651 102.289774-1.432939 153.214209 2.094295 42.547255 3.086329 54.341442-18.297524 54.451669-54.12099 0.55113-66.68676 0.330678-133.042842 0.330678-199.50915zM289.607096 396.813778c49.38127 0 99.203445-0.992034 148.033584 0a351.951776 351.951776 0 0 0 45.854037-3.747685v-35.16211c-0.661356-18.738428 0-57.75845 0-57.75845v-37.476857h-43.318838c-101.959096-3.196555-204.028418-2.314747-306.097739-0.881808-45.854037 0.55113-59.522067 29.650807-58.860711 71.97761S93.955858 396.813778 136.613339 396.813778h152.993757z m454.351776-0.992034h127.311087c61.065231 0 79.583208-14.329386 79.913886-64.702691s-19.069107-69.883315-77.158235-70.544672c-81.567277-0.881808-163.134553 0-244.591604 0h-85.755866v133.153068a459.973305 459.973305 0 0 0 47.176749 2.424973c51.144887-1.653391 102.069322-0.55113 153.103983-0.55113zM505.209249 145.388159c-53.239182-16.974812-103.392034-33.067815-153.324435-48.940366a1022.456835 1022.456835 0 0 1-110.22605-38.689343c-13.227126-5.952207-35.71324-19.179333-29.099677-39.90183s33.729171-19.069107 46.956297-15.431647c67.017438 18.738428 132.271259 44.09042 199.398924 62.277718a170.078794 170.078794 0 0 0 82.889989 1.432939C604.302467 49.822174 665.147247 27.776964 727.314738 9.038536A162.032293 162.032293 0 0 1 776.585783 0c9.589666 0 22.04521 0 26.78493 17.195264a29.650807 29.650807 0 0 1-13.888483 33.067815c-94.353498 33.178041-189.588805 63.820883-284.272981 95.12508z" fill="#575757" p-id="11618"></path></svg>
							<p><span>二手闲置</span></p>
						</div>
					</div>
<<<<<<< HEAD
				</nav> */}
				{/* <div> */}
=======
				</nav>
				<div>
					<h2>&nbsp;&nbsp; <span style={{color:'blue'}}>|</span> 小区资讯</h2>
					<div className='zixun'>
						{
							zixunList.map((item,index)=>{
								return <div key={item._id} className='zibox'>
									<img src={item.img} alt="" className='zxImg'/>
									<span className='zxshuju'>
										<span><b>{item.title}</b></span><br/>
										<span>{item.content}</span>
									</span>
								</div>
							})
						}
						<div className='daodila' onClick={()=>{load()}}>{is_loading?'点击加载更多数据':<Loading type="spinner" color="#3f45ff" />}</div>
					</div>
				</div>
				<div>
>>>>>>> 68cd53bc9756b103f9f9d7c1233b7d2794e053c6
					<Buttonss></Buttonss>
				{/* </div> */}
			</nav>
		</div>
	)
}
